<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    <script src="https://www.layuicdn.com/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
</head>
<body>
    <form class="layui-form" action="" lay-filter="achievementPartForm">
            <div class="layui-form-item" style="margin-top:10px">
            <div class="layui-inline">
                <label class="layui-form-label">部门名称：</label>
                <div class="layui-input-block">
                    <select class="layui-form-select" id="partName1" lay-filter="filter1">
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">部门名称：</label>
                <div class="layui-input-block">
                    <select class="layui-form-select" id="partName2" lay-filter="filter2">
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">部门名称：</label>
                <div class="layui-input-block">
                    <select class="layui-form-select" id="partName3" lay-filter="filter3">
                    </select>
                </div>
            </div>
            <button type="button" id="queryOrder" class="layui-inline layui-btn" lay-filter="query">查询</button>
        </div>
    </form>
    <div id="main" class="layui-card-body" style="margin:0 auto; width: 500px; height: 500px;">
    </div>
</body>

<script src="../../js/jquery-3.4.1.js"></script>
<script>
    layui.use(['form'], function() {
        var form = layui.form;
        var seriesData = [];
        $(document).ready(function () {
            axios.post('/firstWeb/part/queryName').then(function(response) {
                var role1 = document.getElementById("partName1");
                var role2 = document.getElementById("partName2");
                var role3 = document.getElementById("partName3");
                var data = response.data;
                for (var i = 0; i < data.length + 1; i++) {
                    var value = Object.keys(data);
                    var label = Object.values(data);

                    var option1 = document.createElement("option");
                    option1.setAttribute("value", value[i - 1]);
                    if(i != 0) {
                        option1.innerText = label[i - 1];
                    }
                    role1.appendChild(option1);

                    var option2 = document.createElement("option");
                    option2.setAttribute("value", value[i - 1]);
                    if(i != 0) {
                        option2.innerText = label[i - 1];
                    }
                    role2.appendChild(option2);

                    var option3 = document.createElement("option");
                    option3.setAttribute("value", value[i - 1]);
                    if(i != 0) {
                        option3.innerText = label[i - 1];
                    }
                    role3.appendChild(option3);
                }
                form.render("select");
            }).catch(function (error) {
                console.log(error);
            });

            axios.post('/firstWeb/order/queryAchievement').then(function(response) {
                seriesData = response.data;
                LineChart('main', '部门业绩统计图', seriesData);
            }).catch(function (error) {
                console.log(error);
            });
        });



        //监听器1
        form.on('select(filter1)', function() {
            var name1 = $("#partName1 option:selected").text();
            var name2 = $("#partName2 option:selected").text();
            var name3 = $("#partName3 option:selected").text();

            hidden('partName2', name1, name3);
            hidden('partName3', name1, name2);
            form.render("select");
        });

        //监听器2
        form.on('select(filter2)', function() {
            var name1 = $("#partName1 option:selected").text();
            var name2 = $("#partName2 option:selected").text();
            var name3 = $("#partName3 option:selected").text();
            hidden('partName1', name2, name3);
            hidden('partName3', name1, name2);
            form.render("select");
        });

        //监听器3
        form.on('select(filter3)', function() {
            var name1 = $("#partName1 option:selected").text();
            var name2 = $("#partName2 option:selected").text();
            var name3 = $("#partName3 option:selected").text();
            hidden('partName1', name2, name3);
            hidden('partName2', name1, name3);
            form.render("select");
        });

        $('#queryOrder').click(function() {
            var name1 = $("#partName1 option:selected").text();
            var name2 = $("#partName2 option:selected").text();
            var name3 = $("#partName3 option:selected").text();
            var newData = [];
            for(var i = 0; i < seriesData.length; i++) {
                if(seriesData[i].name == name1 || seriesData[i].name == name2 || seriesData[i].name == name3) {
                    newData.push(seriesData[i]);
                }
            }
            LineChart('main', '部门业绩统计图', newData);
        });

        //使option不可选
        function hidden(id, name1, name2) {
            var obj = document.getElementById(id);
            for(var i = 0; i < obj.options.length; i++) {
                var option = obj.options[i];
                var tmp = option.text;
                if(tmp == name1 || tmp == name2) {
                    option.setAttribute("disabled", "true");
                } else {
                    option.removeAttribute("disabled");
                }
            }
        }

        //生成饼图
        var LineChart = function (ID, title, seriesData) {
            var myChart = echarts.init(document.getElementById(ID));
            var option = {
                //标题设置
                title: {
                    text: title,
                    subtext: '',
                    // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                    x: 'center',
                    // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                    y: 'top',
                    // itemGap设置主副标题纵向间隔，单位px，默认为10，
                    itemGap: 30,
                    backgroundColor: '#EEE',
                    // 主标题文本样式设置
                    textStyle: {
                        fontSize: 26,
                        fontWeight: 'bolder',
                        color: '#000080'
                    },
                    // 副标题文本样式设置
                    subtextStyle: {
                        fontSize: 18,
                        color: '#8B2323'
                    }
                },
                //值域设置
                series: [
                    {
                        name: '生源地',
                        type: 'pie',
                        radius: '50%',  // 设置饼状图大小，100%时，最大直径=整个图形的min(宽，高)
                        // radius: ['30%', '60%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
                        center: ['50%', '50%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
                        data: seriesData,
                        // itemStyle 设置饼状图扇形区域样式
                        itemStyle: {
                            // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
                            // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(30, 144, 255，0.5)'
                            }
                        },
                        // 设置值域的标签
                        label: {
                            normal: {
                                position: 'outer',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                                // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                                // {a}指series.name  {b}指series.data的name
                                // {c}指series.data的value  {d}%指这一部分占总数的百分比
                                formatter: '{b}{d}%'
                            }
                        }
                    }
                ],
            };
            myChart.setOption(option);
        }
    });
</script>
</html>